<template>
  <div>
    <form class="register-form">
      <div class="form-group">
        <label for="username">用户名</label>
        <input
          type="text"
          id="username"
          placeholder="请输入用户名"
          v-model="username" />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input
          type="password"
          id="password"
          placeholder="请输入密码"
          v-model="password" />
      </div>

      <button type="button" class="register-btn" @click="register">登录</button>

      <div class="flex justify-center items-center gap-4 mt-10">
        <img src="/imgs/qq.png" alt="" />
        <img src="/imgs/weixin.png" alt="" />
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: "register",
      username: "",
      password: "",
    };
  },
  methods: {
    getCaptcha() {
      // 这里可以编写获取验证码的逻辑，比如调用接口
      console.log("获取验证码，手机号码：", this.phone);
      // 实际项目中，这里会有向服务端发送请求获取验证码的代码
    },
    register() {
      // 注册逻辑
      console.log(
        "注册，用户名：",
        this.username,
        "，密码：",
        this.password,
        "，验证码：",
        this.captcha
      );
      // 实际项目中，这里会有向服务端发送注册请求的代码
    },
  },
};
</script>

<style scoped>
.register-container {
  width: 300px;
  margin: 50px auto;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 5px;
}
.tab {
  display: flex;
  margin-bottom: 20px;
}
.tab-button {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  background-color: #fff;
  cursor: pointer;
}
.tab-button.active {
  background-color: #eee;
  font-weight: bold;
}
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  margin-bottom: 5px;
}
.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
}
.captcha-group {
  display: flex;
}
.captcha-group input {
  flex: 2;
  margin-right: 10px;
}
.get-captcha {
  flex: 1;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.register-btn {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  margin-top: 16px;
}
</style>
